<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HarmonyOS 鸿蒙之家-用户中心</title>
    <link rel="icon" sizes="any" mask href="favicon.ico">
    <link  rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/base.css">
    <script  src="js/jq1.9.js"></script>
    <script  src="js/lazyload.js"></script>
    <script  src="layui/layui.js"></script>
    <script  src="js/iconfont.js"></script>
</head>
<body>
    <header>
        <div class="center">
            <a href="##" class="logo"><img src="images/logo.png" alt=""></a>
            <ul class="nav">
                <li class="on"><a href="##">首页</a></li>
                <li><a href="##">HarmonyOS Next</a></li>
                <li><a href="##">应用</a></li>
                <li><a href="##">资源</a></li>
                <li><a href="##">资讯</a></li>
                <li><a href="##">课堂</a></li>
            </ul>
            <form class="search">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg>
                <div class="text">
                    <input type="search" class="input" placeholder="搜索">
                </div>
            </form>
            <div class="user">
                <ul class="layui-nav">
                    <li class="layui-nav-item " lay-unselect >
                      <a href="javascript:;">
                        <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="userimg">
                      </a>
                      <dl class="layui-nav-child layui-nav-child-r">
                        <dd>
                            <a href="javascript:;" class="name">
                                 <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                                 <span>用户名用户名用户名用户名用户名</span>
                            </a>
                        </dd>
                        <dd><a href="" class="btn"><i class="ico"></i>退出登录</a></dd>
                      </dl>
                    </li>
                  </ul>
            </div>
        </div>
    </header>
    <main>
        <div class="common">
            <div class="center ">
                <div class="title-user">
                    <div class="name">
                        <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                        <span class="bt">盐焗小乳猪</span>
                   </div>
                   <div class="zan">
                        <p>1212</p>
                        <span>获赞</span>
                   </div>
                </div>
                <div class="switch-title">
                    <div class="bt">
                         <a href="##">浏览记录</a>
                         <a href="##">我的收藏</a>
                         <a href="##">下载历史</a>
                         <a href="##" class="on">我的评论</a>
                    </div>
                </div>
                <div class="Litem Litem5">
                    <div class="list">
                         <ul>
                            <li>
                                <div class="tex-p">
                                    界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。因此系统的操作需要符合人的本能，并且使用智能化的技术能力主动适应用户的习惯。
                                </div>
                                <div class="text-small">
                                    三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 区别于其他操作系统的核心要点。
                                </div>
                                <div class="bq">
                                    <div class="time">2024-10-14 13:25:49</div>
                                </div>
                            </li>
                            <li>
                                <div class="tex-p">
                                    界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。因此系统的操作需要符合人的本能，并且使用智能化的技术能力主动适应用户的习惯。
                                </div>
                                <div class="text-small">
                                    三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 区别于其他操作系统的核心要点。
                                    三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 区别于其他操作系统的核心要点。
                                </div>
                                <div class="bq">
                                    <div class="time">2024-10-14 13:25:49</div>
                                </div>
                            </li>
                            <li>
                                <div class="tex-p">
                                    界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。因此系统的操作需要符合人的本能，并且使用智能化的技术能力主动适应用户的习惯。
                                </div>
                                <div class="text-small">
                                    三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 区别于其他操作系统的核心要点。
                                </div>
                                <div class="bq">
                                    <div class="time">2024-10-14 13:25:49</div>
                                </div>
                            </li>
                            <li>
                                <div class="tex-p">
                                    界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。因此系统的操作需要符合人的本能，并且使用智能化的技术能力主动适应用户的习惯。
                                </div>
                                <div class="text-small">
                                    三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 区别于其他操作系统的核心要点。
                                    三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 区别于其他操作系统的核心要点。
                                </div>
                                <div class="bq">
                                    <div class="time">2024-10-14 13:25:49</div>
                                </div>
                            </li>
                         </ul>
                    </div>
                    <!-- 分页 -->
                    <div class="pages">
                        <div class="pagewrap">
                            <ul class="pagination">
                                <li class="prev disabled"><span>上一页</span></li>
                                <li class="active"><a href="##" data-page="0">1</a></li>
                                <li><a href="##" data-page="1">2</a></li>
                                <li><a href="##" data-page="2">3</a></li>
                                <li><a href="##" data-page="3">4</a></li>
                                <li><a href="##" data-page="4">5</a></li>
                                <li><a href="##" data-page="5">6</a></li>
                                <li><a href="##" data-page="6">7</a></li>
                                <li><a href="##" data-page="7">8</a></li>
                                <li class="next"><a href="##" data-page="1">下一页</a></li>
                            </ul> 
                        </div>
                    </div>
                </div>
              
            </div>
            <div class="TOP_fixed"></div>
        </div>
    </main>
    <footer>
        <div class="center">
            版权所有 Copyright © 2024-2024 www.hm123.cn <br/>
            渝ICP备20008086号-21 · 渝公网安备50010702505498号 · 重庆方砖科技有限版权所有 · 违法和不良信息举报：12377
        </div>
    </footer>
    <script  src="js/base.js"></script>
</body>
</html>